<template>
	<div id="index-home" @contextmenu.prevent.stop="changeView" @click="inputFocus(false)">
		<div id="beian">
			<a href="https://beian.miit.gov.cn/" target="_blank">鄂ICP备2021015624号-2</a>
		</div>
		<transition name="el-fade-in" mode="out-in">
			<div class="view-front view" v-if="!isShowContentMenu">
				<div class="top">
					<div class="date-time" v-if="setting.showTime">
						<span class="time">{{ timeFormat(now) }}</span>
						<span class="date">{{ dateFormat(now) }}</span>
					</div>
					<div v-if="weatherForecast" class="weatherForecast">
						<div class="weather">
							<div class="cityName" v-if="weather">{{ weather.city }} {{ weather.weather }} {{
								weather.temperature
							}}℃</div>
						</div>
						<div class="foreast-wapper">
							<div class="weather foreast">
								<template v-for="i in [0, 1, 2, 3]">
									<transition name="el-fade-in-linear">
										<div class="item" v-if="(now.getTime() / 2500).toFixed() % 4 === i">
											{{ i === 0 ? '今天' : i === 1 ? '明天' : i === 2 ? '后天' : '大后天' }}, {{
												getWeatherStr(weatherForecast[i])
											}},
											{{ weatherForecast[i].nighTemp }} ~ {{ weatherForecast[i].dayTemp }} ℃
										</div>
									</transition>
								</template>
							</div>
						</div>
					</div>
				</div>
				<div class="search-box" :class="{ active: activeInput }">
					<input class="search" ref="search" @click.stop @focus="inputFocus(true)" v-model="search"
						placeholder="Search..." :class="{ active: activeInput }" @input="handleInput"
						@keydown.enter="handleSelect(search, $event)" @contextmenu.stop />
					<el-popover v-if="activeInput" v-model:visible="popoverVisible" popper-class="engine-popper"
						placement="bottom-start" :hide-after="0" :width="150" trigger="click">
						<template #reference>
							<div @click="popoverVisible = true" v-html="getEngineLogoHtml(selectedEngine)" class="engine"
								@click.stop="showEngineList"></div>
						</template>

						<div class="engineList">
							<div v-for="(item, index) in selectEngine"
								@click="selectedEngine = item.engine; popoverVisible = false; saveEngine(item.engine)"
								class="engine">
								<span class="logo" v-html="getEngineLogoHtml(item.engine)"></span>
								<span class="name">{{ item.name }}</span>
								<!-- <span class="kjj">Alt+{{ index+1 }}</span> -->
							</div>
						</div>

					</el-popover>

				</div>

				<div class="keyword"
					:style="{ height: search.length && activeInput ? keywords.length * 30 + 30 + 'px' : 0 }">
					<div class="translate row" @click="translate(search)">
						<svg class="el-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
							<path fill="currentColor"
								d="m174.72 855.68 135.296-45.12 23.68 11.84C388.096 849.536 448.576 864 512 864c211.84 0 384-166.784 384-352S723.84 160 512 160 128 326.784 128 512c0 69.12 24.96 139.264 70.848 199.232l22.08 28.8-46.272 115.584zm-45.248 82.56A32 32 0 0 1 89.6 896l58.368-145.92C94.72 680.32 64 596.864 64 512 64 299.904 256 96 512 96s448 203.904 448 416-192 416-448 416a461.056 461.056 0 0 1-206.912-48.384l-175.616 58.56z">
							</path>
							<path fill="currentColor"
								d="M352 576h320q32 0 32 32t-32 32H352q-32 0-32-32t32-32zm32-192h256q32 0 32 32t-32 32H384q-32 0-32-32t32-32z">
							</path>
						</svg>
						<span style="margin-left: 3px;">翻译(Alt+Enter):{{ search }}</span>
					</div>
					<div class="row" v-for="(item, index) in keywords" :key="index" @click="handleSelect(item)">{{ item
					}}</div>
				</div>
				<div v-if="search.length === 0 && setting.showHotSearch" class="keyword"
					:style="{ height: !search.length.length && activeInput ? baiduHotSearch.length * 30 + 'px' : 0 }">
					<div class="row" v-for="(item, index) in baiduHotSearch" :key="index" @click="handleSelect(item)">{{
						item
					}}</div>
				</div>
			</div>
			<div class="view-back" v-else>
				<div class="site-box">
					<div class="site" @click="go('/site')">
						<div class="logo">
							<svg t="1660102021354" class="icon" viewBox="0 0 1024 1024" version="1.1"
								xmlns="http://www.w3.org/2000/svg" p-id="6819" width="200" height="200">
								<path
									d="M290.0992 409.6H155.136a371.4048 371.4048 0 0 0-14.2848 102.4c0 35.5328 4.9664 69.888 14.336 102.4h134.9632c-5.632-32.768-8.4992-66.9184-8.4992-102.4 0-35.4816 2.8672-69.632 8.4992-102.4z m52.0704 0a542.1056 542.1056 0 0 0-9.3696 102.4c0 35.7376 3.072 69.888 9.3696 102.4H486.4V409.6H342.1696z m75.008 461.3632A491.8784 491.8784 0 0 1 301.568 665.6H173.9776a372.0704 372.0704 0 0 0 243.2 205.3632z m69.2224-3.584V665.6H354.9696c24.064 77.1072 67.84 144.2304 131.4304 201.8304zM417.1776 153.088A372.0704 372.0704 0 0 0 173.9776 358.4H301.568a491.8784 491.8784 0 0 1 115.5584-205.3632z m69.2224 3.584C422.8096 214.1184 379.0848 281.2416 354.9696 358.4H486.4V156.5696zM733.9008 409.6c5.632 32.768 8.4992 66.9184 8.4992 102.4 0 35.4816-2.8672 69.632-8.4992 102.4h135.0144c9.3184-32.512 14.2848-66.8672 14.2848-102.4s-4.9664-69.888-14.336-102.4h-134.9632z m-52.0704 0H537.6v204.8h144.2304c6.2464-32.512 9.3696-66.6624 9.3696-102.4s-3.072-69.888-9.3696-102.4z m-75.008 461.3632A372.0704 372.0704 0 0 0 850.0224 665.6H722.432a491.8784 491.8784 0 0 1-115.5584 205.3632z m-69.2224-3.584c63.5904-57.5488 107.3152-124.672 131.4304-201.7792H537.6v201.8304zM606.8224 153.088A491.8784 491.8784 0 0 1 722.432 358.4h127.6416a372.0704 372.0704 0 0 0-243.2-205.3632z m-69.2224 3.584V358.4h131.4304c-24.064-77.1072-67.84-144.2304-131.4304-201.8304zM512 947.2a435.2 435.2 0 1 1 0-870.4 435.2 435.2 0 0 1 0 870.4z"
									fill="#1296db" p-id="6820"></path>
							</svg>
							<div class="label">网址导航</div>
						</div>
					</div>
					<!-- <div class="site" @click="go('/site2')">
						<div class="logo">
							<svg t="1660102021354" class="icon" viewBox="0 0 1024 1024" version="1.1"
								xmlns="http://www.w3.org/2000/svg" p-id="6819" width="200" height="200">
								<path
									d="M290.0992 409.6H155.136a371.4048 371.4048 0 0 0-14.2848 102.4c0 35.5328 4.9664 69.888 14.336 102.4h134.9632c-5.632-32.768-8.4992-66.9184-8.4992-102.4 0-35.4816 2.8672-69.632 8.4992-102.4z m52.0704 0a542.1056 542.1056 0 0 0-9.3696 102.4c0 35.7376 3.072 69.888 9.3696 102.4H486.4V409.6H342.1696z m75.008 461.3632A491.8784 491.8784 0 0 1 301.568 665.6H173.9776a372.0704 372.0704 0 0 0 243.2 205.3632z m69.2224-3.584V665.6H354.9696c24.064 77.1072 67.84 144.2304 131.4304 201.8304zM417.1776 153.088A372.0704 372.0704 0 0 0 173.9776 358.4H301.568a491.8784 491.8784 0 0 1 115.5584-205.3632z m69.2224 3.584C422.8096 214.1184 379.0848 281.2416 354.9696 358.4H486.4V156.5696zM733.9008 409.6c5.632 32.768 8.4992 66.9184 8.4992 102.4 0 35.4816-2.8672 69.632-8.4992 102.4h135.0144c9.3184-32.512 14.2848-66.8672 14.2848-102.4s-4.9664-69.888-14.336-102.4h-134.9632z m-52.0704 0H537.6v204.8h144.2304c6.2464-32.512 9.3696-66.6624 9.3696-102.4s-3.072-69.888-9.3696-102.4z m-75.008 461.3632A372.0704 372.0704 0 0 0 850.0224 665.6H722.432a491.8784 491.8784 0 0 1-115.5584 205.3632z m-69.2224-3.584c63.5904-57.5488 107.3152-124.672 131.4304-201.7792H537.6v201.8304zM606.8224 153.088A491.8784 491.8784 0 0 1 722.432 358.4h127.6416a372.0704 372.0704 0 0 0-243.2-205.3632z m-69.2224 3.584V358.4h131.4304c-24.064-77.1072-67.84-144.2304-131.4304-201.8304zM512 947.2a435.2 435.2 0 1 1 0-870.4 435.2 435.2 0 0 1 0 870.4z"
									fill="#1296db" p-id="6820"></path>
							</svg>
							<div class="label">网址导航2</div>
						</div>
					</div> -->
					<div class="site" @click="go('/video')">
						<div class="logo">
							<svg t="1660101966008" class="icon" viewBox="0 0 1024 1024" version="1.1"
								xmlns="http://www.w3.org/2000/svg" p-id="3930" width="200" height="200">
								<path
									d="M63.465962 793.139052c0 55.038524 44.620243 99.708909 99.709933 99.708909l697.969529 0c55.04057 0 99.709933-44.669362 99.709933-99.708909L960.855356 194.878432c0-55.089689-44.669362-99.709933-99.709933-99.709933L163.174871 95.1685c-55.089689 0-99.709933 44.620243-99.709933 99.709933L63.464939 793.139052zM761.435491 494.00823 362.59576 743.283574 362.59576 244.732887 761.435491 494.00823z"
									p-id="3931" fill="#1296db"></path>
							</svg>
							<div class="label">视频解析</div>
						</div>

					</div>
					<div class="site" @click="go('/netpan')">
						<div class="logo">
							<svg t="1671009970007" class="icon" viewBox="0 0 1408 1024" version="1.1"
								xmlns="http://www.w3.org/2000/svg" p-id="2229" width="200" height="200">
								<path
									d="M620.8 454.4h19.2c19.2 0 32-12.8 32-32s-12.8-32-32-32h-19.2c-44.8 0-76.8-25.6-76.8-57.6s32-57.6 76.8-57.6c12.8 0 19.2 0 32 6.4 19.2 6.4 38.4-6.4 44.8-25.6 0-19.2 25.6-32 51.2-32 32 0 51.2 19.2 51.2 38.4v6.4c-6.4 19.2 6.4 38.4 25.6 44.8 25.6 6.4 38.4 19.2 38.4 38.4s-25.6 38.4-51.2 38.4h-25.6c-19.2 0-32 12.8-32 32s12.8 32 32 32h25.6c64 0 115.2-44.8 115.2-102.4 0-38.4-25.6-76.8-64-89.6 0-57.6-57.6-102.4-115.2-102.4-44.8 0-83.2 19.2-102.4 57.6h-25.6c-76.8 0-140.8 51.2-140.8 121.6s64 115.2 140.8 115.2zM544 768h-320c-19.2 0-32 12.8-32 32s12.8 32 32 32h320c19.2 0 32-12.8 32-32s-12.8-32-32-32z"
									fill="#1296db" p-id="2230"></path>
								<path
									d="M1388.8 716.8v-19.2l-153.6-544C1216 64 1132.8 0 1056 0h-704C275.2 0 192 64 166.4 147.2L12.8 691.2v19.2c-6.4 32-12.8 57.6-12.8 89.6C0 921.6 102.4 1024 224 1024h960c121.6 0 224-102.4 224-224 0-32-6.4-57.6-19.2-83.2zM230.4 166.4C243.2 108.8 300.8 64 352 64h704c51.2 0 102.4 44.8 121.6 102.4l121.6 448c-32-25.6-70.4-38.4-115.2-38.4h-960c-44.8 0-83.2 12.8-115.2 32l121.6-441.6zM1184 960h-960C134.4 960 64 889.6 64 800c0-12.8 0-19.2 6.4-32v-6.4c12.8-70.4 76.8-121.6 153.6-121.6h960c76.8 0 140.8 51.2 153.6 128 0 12.8 6.4 19.2 6.4 32 0 89.6-70.4 160-160 160z"
									fill="#1296db" p-id="2231"></path>
								<path
									d="M1120 704c-51.2 0-96 44.8-96 96s44.8 96 96 96 96-44.8 96-96-44.8-96-96-96z m0 128c-19.2 0-32-12.8-32-32s12.8-32 32-32 32 12.8 32 32-12.8 32-32 32z"
									fill="#1296db" p-id="2232"></path>
							</svg>
							<div class="label">网盘</div>
						</div>

					</div>
					<div class="site" @click="go('/chat')">
						<div class="logo">
							<svg t="1678532668507" class="icon" viewBox="0 0 1344 1024" version="1.1"
								xmlns="http://www.w3.org/2000/svg" p-id="2844" width="200" height="200">
								<path
									d="M1140.864 448.736a16 16 0 0 0-9.696 30.496C1256.224 519.072 1312 578.496 1312 672c0 83.168-75.872 147.712-121.056 178.816A16 16 0 0 0 1184 864v122.336a254.496 254.496 0 0 1-100.032-68.96 16.16 16.16 0 0 0-14.976-5.088c-9.12 1.76-18.432 4.256-27.872 6.784-16.32 4.384-33.152 8.928-49.12 8.928-82.176 0-139.712-17.664-198.528-60.896a16 16 0 0 0-18.976 25.792C839.36 940.576 902.368 960 992 960c20.192 0 39.136-5.088 57.44-10.016 5.696-1.568 11.36-3.104 16.96-4.416 59.808 63.168 127.456 77.536 130.4 78.112a15.84 15.84 0 0 0 13.312-3.296A15.936 15.936 0 0 0 1216 1008v-135.648c82.624-58.912 128-129.824 128-200.352 0-108.192-64.544-179.136-203.136-223.264z"
									fill="#1296db" p-id="2845"></path>
								<path
									d="M1056 432C1056 185.728 831.424 0 533.664 0 234.4 0 0 189.792 0 432.064c0 145.248 102.752 249.312 192 312.288v212.352a16.064 16.064 0 0 0 22.56 14.592c4.672-2.08 113.888-51.712 207.328-153.888 40.48 7.52 86.272 14.752 127.808 14.752C852.512 832.16 1056 671.328 1056 432zM549.664 800.16c-41.92 0-89.568-8.032-130.656-15.872a16.224 16.224 0 0 0-14.976 5.088C338.432 863.36 261.344 910.368 224 930.624V736a16 16 0 0 0-6.944-13.184C132.64 664.736 32 567.2 32 432.064 32 207.712 252.352 32 533.664 32 813.216 32 1024 203.968 1024 432c0 220.224-190.624 368.16-474.336 368.16z"
									fill="#1296db" p-id="2846"></path>
								<path
									d="M528 368c-35.296 0-64 28.704-64 64s28.704 64 64 64 64-28.704 64-64-28.704-64-64-64z m0 96a32.032 32.032 0 0 1 0-64 32.032 32.032 0 0 1 0 64zM752 368c-35.296 0-64 28.704-64 64s28.704 64 64 64 64-28.704 64-64-28.704-64-64-64z m0 96a32.032 32.032 0 0 1 0-64 32.032 32.032 0 0 1 0 64zM304 371.04c-35.296 0-64 28.704-64 64s28.704 64 64 64 64-28.704 64-64-28.704-64-64-64z m0 96a32.032 32.032 0 0 1 0-64 32.032 32.032 0 0 1 0 64z"
									fill="#1296db" p-id="2847"></path>
							</svg>
							<div class="label">聊天</div>
						</div>

					</div>
					<div class="site" @click="go('/setting')">
						<div class="logo">
							<svg t="1660101987164" class="icon" viewBox="0 0 1024 1024" version="1.1"
								xmlns="http://www.w3.org/2000/svg" p-id="4938" width="200" height="200">
								<path
									d="M661.333333 665.6l51.2 12.8 42.666667-72.533333-34.133333-38.4c4.266667-21.333333 4.266667-38.4 4.266666-55.466667s0-34.133333-4.266666-51.2l34.133333-38.4-42.666667-72.533333-51.2 12.8c-25.6-21.333333-55.466667-42.666667-89.6-51.2L554.666667 256h-85.333334l-17.066666 51.2c-34.133333 8.533333-64 25.6-89.6 51.2l-51.2-12.8-42.666667 72.533333 34.133333 38.4c-4.266667 21.333333-4.266667 38.4-4.266666 55.466667s0 34.133333 4.266666 51.2l-34.133333 38.4 42.666667 72.533333 51.2-12.8c25.6 21.333333 55.466667 42.666667 89.6 51.2L469.333333 768h85.333334l17.066666-51.2c34.133333-8.533333 64-25.6 89.6-51.2z m38.4 81.066667c-21.333333 17.066667-51.2 34.133333-76.8 42.666666L597.333333 853.333333h-170.666666l-25.6-64c-29.866667-12.8-55.466667-25.6-76.8-42.666666l-68.266667 12.8-85.333333-149.333334 42.666666-51.2V512c0-17.066667 0-29.866667 4.266667-42.666667l-42.666667-51.2 85.333334-149.333333 68.266666 12.8c21.333333-17.066667 51.2-34.133333 76.8-42.666667L426.666667 170.666667h170.666666l25.6 64c29.866667 12.8 55.466667 25.6 76.8 42.666666l68.266667-12.8 85.333333 149.333334-42.666666 51.2c4.266667 12.8 4.266667 29.866667 4.266666 42.666666s0 29.866667-4.266666 42.666667l42.666666 51.2-85.333333 149.333333-68.266667-4.266666zM512 554.666667c25.6 0 42.666667-17.066667 42.666667-42.666667s-17.066667-42.666667-42.666667-42.666667-42.666667 17.066667-42.666667 42.666667 17.066667 42.666667 42.666667 42.666667z m0 85.333333c-72.533333 0-128-55.466667-128-128s55.466667-128 128-128 128 55.466667 128 128-55.466667 128-128 128z"
									fill="#1296db" p-id="4939"></path>
							</svg>
							<div class="label">设置</div>
						</div>

					</div>
					<!-- <div class="site">
						<div class="logo">
							<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-78e17ca8=""><path fill="currentColor" d="M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64h352z"></path></svg>
						</div>
						<div class="label">
						</div>
					</div> -->
				</div>
				<div class="tip">
					<a :href="STATIC_URL + 'New Tab Redirect.rar'">点击这里</a>下载设置浏览器主页的插件
				</div>
			</div>
		</transition>

		<img v-if="bgSrc" class="bg" :class="{ 'active-bg': activeBg, op0: !bgReady, bgBlur }" @load="bgReadyFun"
			:src="bgSrc" />
	</div>
</template>

<script>
import { search, getBg, getWeather, proxy, getHotSearch } from '@/api/nav.js';
import { getSetting } from '@/api/setting.js'
import dateFormat from '@/utils/dateFormat.js';
import isPE from '@/utils/isPE.js';
import insert2body from '@/components/Insert2Body.vue';
import uploadImage from '@/components/uploadImage.vue';
import config from '@/config/index.js';
// import loginBox from '@/components/LoginBox.vue';
const USE_BG = 'USE_BG';
const LAST_ENTER_TIME = 'LAST_ENTER_TIME';
import { logOut } from '@/api/user.js';
export default {
	data() {
		return {
			selectEngine: [
				{
					name: '百度',
					url: 'https://www.baidu.com/s?ie=UTF-8&wd=${search}',
					engine: 'baidu',
					default: 'https://baidu.com'
				},
				{
					name: '搜狗',
					url: 'https://www.sogou.com/web?ie=UTF-8&query=${search}',
					engine: 'sougou'
				},
				{
					name: '360搜索',
					url: 'https://www.so.com/s?ie=UTF-8&q=${search}',
					engine: '360'
				},
				{
					name: 'bing',
					url: 'https://cn.bing.com/search?q=${search}',
					engine: 'bing'
				}
			],
			popoverVisible: false,
			selectedEngine: 'baidu',
			showEngineDialog: false,
			search: '',
			activeInput: false,
			activeBg: false,
			bgReady: false,
			keywords: [],
			now: new Date(),
			bgSrc: false,
			weather: null,
			weatherForecast: null,
			foreastIndex: null,
			bgBlur: false,
			baiduIndexHtml: '',
			baiduHotSearch: [],
			initedSetting: false,
			isShowContentMenu: false,
			setting: {
				autoFocus: false,
				bgSource: [],
				changeBgMode: 0,
				saveSearchHistory: false,
				showDate: false,
				showHotSearch: false,
				showTime: false,
				showWeather: false,
			}
		};
	},
	created() {
		//获取默认搜索引擎
		this.getDefaultSearchEngine();
		//初始化设置
		this.getSetting();

		this.getRecommendBg();
		// 等到设置初始完成
		this.awaitInitedSetting(() => {
			if (this.setting.showHotSearch) {
				this.getBaiduHot();
			}
			if (this.setting.showDate || this.setting.showTime) {
				this.asdbnjiasd = setInterval(() => {
					this.now = new Date();
				}, 1000);
			}
		});
	},
	beforeDestroy() {
		clearInterval(this.asdbnjiasd);
	},
	methods: {
		getEngineLogoHtml(engine) {
			if (engine === 'baidu') {
				return `<svg t="1659000080267" class="icon"
									viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1689"
									width="30" height="30">
									<path
										d="M541.66308594 439.69622802c25.9552002 11.4944458 46.05194092 33.07434083 60.4385376 57.47222901 18.68774414 27.29003906 40.26763916 51.76208497 63.25653076 74.75097656 21.50573731 21.50573731 44.49462891 43.15979004 68.96667481 63.25653076 4.37530518 2.89215088 8.67645263 7.19329834 11.49444579 10.08544922 18.68774414 18.68774414 28.77319336 43.08563232 31.66534424 68.96667481 2.89215088 27.29003906-4.30114747 54.65423584-14.38659668 79.05212402-8.60229492 18.68774414-22.98889161 33.07434083-40.26763916 43.15979004-24.4720459 12.90344239-53.17108154 15.79559326-80.46112061 15.79559326a295.14770508 295.14770508 0 0 1-79.05212402-14.38659667 265.26214599 265.26214599 0 0 0-94.921875-7.19329835c-14.38659667 1.4831543-28.69903565 5.78430176-44.4946289 8.67645265-33.07434083 5.71014404-67.63183594 7.11914063-100.70617677 5.71014404a96.4050293 96.4050293 0 0 1-71.85882568-37.37548829 131.62994385 131.62994385 0 0 1-22.9888916-44.4946289 180.72235107 180.72235107 0 0 1-7.19329833-47.4609375c1.4831543-18.68774414 5.78430176-37.37548828 15.79559326-53.24523926 12.9776001-24.4720459 34.55749512-44.49462891 56.06323242-61.77337647 5.78430176-5.78430176 12.9776001-8.67645263 18.68774414-15.79559326l31.66534423-28.77319336c18.68774414-18.68774414 37.37548828-38.85864258 51.76208497-60.36437988 4.30114747-5.78430176 7.19329834-12.9776001 12.90344238-18.68774414 18.68774414-24.4720459 48.9440918-43.15979004 80.53527832-45.97778321 18.68774414-2.96630859 37.37548828 1.40899658 53.17108154 8.60229493zM477.14587402 544.62939453h-45.9777832v67.48352051h-48.9440918a51.68792724 51.68792724 0 0 0-15.79559326 2.96630859c-12.90344239 4.30114747-24.4720459 11.4944458-34.4833374 20.09674072a94.40277099 94.40277099 0 0 0-24.4720459 41.67663575 101.74438477 101.74438477 0 0 0 1e-8 41.67663574c2.89215088 12.9776001 7.19329834 27.36419677 15.79559326 37.37548828 11.56860352 14.38659667 27.36419677 25.9552002 45.9777832 30.18218994 5.78430176 0.96405029 11.56860352 1.33483887 17.27874755 1.40899659H477.14587402V544.62939453z m73.26782227 71.85882568h-47.4609375v122.21191407a48.9440918 48.9440918 0 0 0 48.9440918 48.86993408h112.12646484V616.48822021h-45.9777832v132.22320557h-48.9440918a18.46527099 18.46527099 0 0 1-14.38659668-5.71014404 23.21136474 23.21136474 0 0 1-4.30114746-12.9776001V616.56237793z m-119.31976319 35.96649171v96.25671386h-37.37548828a40.86090088 40.86090088 0 0 1-33.07434081-15.79559326c-5.71014404-8.60229492-10.01129151-20.09674073-8.60229493-30.18218994 0-8.60229492 1.4831543-17.27874756 4.30114746-25.88104248a47.09014893 47.09014893 0 0 1 22.98889161-21.50573731c2.96630859-1.4831543 5.78430176-2.96630859 10.08544922-2.96630859h41.67663573z m352.24914552-284.69146729c14.31243896 8.67645263 25.80688477 21.57989502 34.4833374 35.9664917 5.71014404 12.9776001 11.4944458 25.88104248 11.4944458 40.26763916 0 20.09674073 1.4831543 40.26763916-2.89215088 58.95538329a89.13757325 89.13757325 0 0 1-17.27874756 37.37548829 63.55316162 63.55316162 0 0 1-33.0001831 21.50573731c-12.9776001 2.96630859-27.36419677 4.37530518-40.26763916 2.96630859a83.72406006 83.72406006 0 0 1-44.56878662-15.86975098 70.00488281 70.00488281 0 0 1-22.98889161-34.4833374c-5.78430176-17.27874756-5.78430176-37.37548828-5.78430175-56.06323242 0-20.17089844 2.89215088-38.85864258 11.49444579-57.54638672 5.78430176-12.90344239 14.38659667-24.4720459 27.36419679-33.07434082 8.60229492-4.30114747 18.68774414-7.11914063 28.69903563-8.60229492 17.27874756-2.89215088 37.37548828 0 53.17108155 8.60229492z m-493.14880372-54.58007812c20.17089844 11.4944458 34.55749512 28.77319336 44.64294434 48.86993407 2.81799317 8.60229492 7.11914063 17.27874756 7.11914063 27.29003906 2.96630859 22.98889161 1.4831543 47.4609375-4.30114747 68.96667481a82.68585205 82.68585205 0 0 1-24.47204589 40.26763917 82.61169434 82.61169434 0 0 1-54.58007813 20.17089843 64.29473877 64.29473877 0 0 1-44.49462891-17.27874756c-15.86975098-14.38659667-25.9552002-34.4833374-31.66534424-54.58007813-2.89215088-14.38659667-5.78430176-28.77319336-2.89215088-43.15979003 2.89215088-24.4720459 10.08544922-47.4609375 24.47204591-68.96667481a62.21832276 62.21832276 0 0 1 41.67663573-28.77319336 70.15319825 70.15319825 0 0 1 44.49462891 7.19329835zM646.74456787 162.2722168c12.90344239 5.71014404 22.98889161 15.79559326 31.59118653 27.29003906 11.56860352 15.79559326 20.17089844 34.4833374 22.98889159 53.17108154 1.4831543 14.38659667 0 27.29003906-4.30114745 40.26763916a119.3939209 119.3939209 0 0 1-18.68774414 45.97778321c-8.60229492 11.4944458-18.68774414 22.98889161-31.59118653 30.18218994a61.99584961 61.99584961 0 0 1-38.78448486 8.60229492c-15.86975098-1.40899658-33.07434083-7.11914063-44.56878663-18.68774414-12.9776001-11.4944458-18.68774414-27.29003906-22.98889159-43.08563233a208.01239013 208.01239013 0 0 1-1.4831543-51.76208496 113.46130372 113.46130372 0 0 1 17.27874756-43.08563232c8.60229492-14.38659667 18.68774414-25.9552002 30.18218994-37.37548828 8.60229492-5.78430176 20.09674073-12.9776001 31.59118652-15.86975098 10.08544922-1.40899658 20.17089844 0 28.77319336 4.37530518zM451.19067383 150.70361328c18.68774414 12.9776001 30.18218994 31.66534424 37.37548828 53.24523926 11.4944458 33.07434083 10.01129151 68.96667481-2.96630859 100.63201904a103.74664307 103.74664307 0 0 1-28.69903565 41.67663574 72.37792969 72.37792969 0 0 1-37.37548828 15.79559326 63.03405762 63.03405762 0 0 1-38.78448487-12.97760009c-17.27874756-12.90344239-28.77319336-33.0001831-34.4833374-53.17108155a153.06152344 153.06152344 0 0 1 2.81799317-94.921875c7.19329834-18.61358643 17.27874756-34.40917969 33.07434082-45.9777832a63.99810791 63.99810791 0 0 1 28.77319336-12.90344238 56.06323242 56.06323242 0 0 1 40.26763916 8.60229492z"
										p-id="1690"></path>
								</svg>`
			}
			if (engine === 'sougou') {
				return `<svg t="1659001079665" class="icon"
									viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1927"
									width="30" height="30">
									<path
										d="M723 308.4c21.4 10.8 45.6 21.6 38.6 50.8-7.9 33.4-37.6 32.6-63.5 29.4-54-6.8-107.3-19.3-161.4-24-29.3-2.5-71-2-76.3 34.1-5.4 36.2 36.5 35.8 61.9 43.9 60.8 19.3 124.2 31.1 181.8 60.1 47.8 24.1 79.2 58.2 78 115-1.3 58.5-39.2 88.3-87.6 107.5-55.4 22.1-114.2 30.1-179.8 30.1-58.7-1.7-255.9-25.2-246.4-92.4 6.6-46.3 50.5-30.5 82.6-25.8 56.1 8.2 112.1 20.6 168.5 23.1 27.6 1.2 71.6 0.5 76.8-35.4 5.9-40.9-39.6-40.2-66.4-47.8-59.2-16.9-119.2-31-175.6-56.4-48.9-22.1-82.4-55.8-83.4-111.5C268 242.3 597.1 244.6 723 308.4z m160.1 475.2c11.2-16.3 32.6-19.6 47.7-7.5 15.1 12.1 18.2 35.1 7 51.3-28.4 41.1-62.3 78.1-100.9 109.8-5.8 4.8-13.1 7.5-20.6 7.5-10.9-0.1-21-5.5-27.1-14.5-11.4-16.1-8.5-39.1 6.5-51.4 33.3-27.5 62.8-59.5 87.4-95.2zM511.5 65.2C757.7 65.2 958 265.5 958 511.7c0 75.4-19 149.5-55.4 215.5-6.1 11.1-17.7 18.2-30.4 18.5-12.7 0.3-24.6-6.3-31.1-17.2-6.5-10.9-6.8-24.4-0.6-35.5 30.5-55.5 46.6-117.9 46.5-181.3 0-207.1-168.5-375.6-375.6-375.6S135.9 304.6 135.9 511.7s168.5 375.6 375.6 375.6c59.5 0.2 118.2-13.9 171.1-41.1 11.3-6 25-5.5 35.8 1.4 10.8 6.9 17 19.1 16.3 31.9-0.7 12.8-8.3 24.2-19.8 29.8-62.9 32.3-132.6 49.1-203.3 48.9C265.3 958.2 65 757.9 65 511.7S265.3 65.2 511.5 65.2z m0 0"
										fill="#2c2c2c" p-id="1928"></path>
								</svg>`
			}
			if (engine === '360') {
				return `<svg t="1662084985948" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2359" width="30" height="30"><path d="M469.333333 768c-166.4 0-298.666667-132.266667-298.666666-298.666667s132.266667-298.666667 298.666666-298.666666 298.666667 132.266667 298.666667 298.666666-132.266667 298.666667-298.666667 298.666667z m0-85.333333c119.466667 0 213.333333-93.866667 213.333334-213.333334s-93.866667-213.333333-213.333334-213.333333-213.333333 93.866667-213.333333 213.333333 93.866667 213.333333 213.333333 213.333334z m251.733334 0l119.466666 119.466666-59.733333 59.733334-119.466667-119.466667 59.733334-59.733333z" fill="#444444" p-id="2360"></path></svg>`
			}
			if (engine === 'bing') {
				return `<svg t="1662085078476" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3388" width="30" height="30"><path d="M153.813333 0L358.4 71.936V791.893333l288.128-166.186666-141.226667-66.346667-89.173333-221.866667 453.973333 159.488v231.893334L358.528 1024l-204.672-113.92V0z" p-id="3389"></path></svg>`
			}
		},
		showEngineList() {
			this.showEngineDialog = true
		},
		getSetting() {
			getSetting().then(res => {
				this.initedSetting = true
				if (res.code == 200) {
					this.setting = res.data
				}
			})
		},
		changeView() {
			if (this.isShowContentMenu) {
				this.isShowContentMenu = false;
				this.activeBg = false;
				this.activeInput = false;
				this.bgBlur = false;
			} else {
				this.isShowContentMenu = true;
				this.activeBg = true;
				this.bgBlur = true;
			}
		},
		logout() {
			this.$confirm('确定退出登录?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.showUserInfoBox = false;
					logOut().then(res => {
						if (res.code == 200) {
							this.$store.commit('user/logOut');
						} else {
							console.log(res);
						}
					});
				})
				.catch(() => { });
		},
		bgReadyFun() {
			setTimeout(() => {
				this.bgReady = true;
				window.localStorage.setItem(USE_BG, this.bgSrc);
			}, 200);
		},
		delBg(ind) {
			this.$confirm('确定删除该背景？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.setting.selfBg.splice(ind, 1);
				})
				.catch(() => { });
		},
		awaitInitedSetting(cb) {
			if (this.initedSetting) {
				cb();
			} else {
				setTimeout(() => {
					this.awaitInitedSetting(cb);
				}, 100);
			}
		},
		getSrc(src) {
			if (!src) {
				return null;
			}
			if (src.startsWith('http://') || src.startsWith('https://')) {
				return src;
			}
			return config.STATIC_URL + src;
		},
		go(path) {
			this.$router.push(path);
		},
		hideMenu() {
			let doms = document.querySelectorAll('#menu-area .menu-list .menu-item');

			for (let i = 0, l = doms.length; i < l; i++) {
				doms[i].style.transform = `translateX(0px) translateY(0px) scale(0)`;
				doms[i].style.transition = `all .2s ease-in-out 0s`;
			}
			setTimeout(() => {
				document.querySelector('#menu-area .index-menu').style.height = '0px';
				setTimeout(() => {
					this.isShowMenu = false;
				}, 200);
			}, 200);
		},
		inputFocus(flag, e) {
			this.activeInput = flag;
			this.activeBg = flag;
			this.popoverVisible = false
			this.isShowContentMenu = false;
			this.activeBg = false;
			this.bgBlur = false;
		},
		getBaiduHot() {
			getHotSearch().then(res => {
				if (res.code === 200) {
					this.baiduHotSearch = res.data;
				} else {
					console.error("获取热搜失败", res)
				}
			});
		},
		handleInput(e) {
			//节流
			clearTimeout(this.asjdabndf);
			this.asjdabndf = setTimeout(() => {
				this.querySearchAsync(this.search, res => {
					this.keywords = res;
				});
			}, 300);
		},
		changeEngine(v) {
			if (this.selectedEngine === v) {
				this.handleSelect(this.search);
			} else {
				this.selectedEngine = v;
			}
		},
		querySearchAsync(queryString, cb) {
			if (queryString.trim() === '') {
				cb([]);
				return;
			}
			search(queryString, 'baidu')
				.then(res => {
					console.log(res);
					if (res.code == 200 && res.data.list && res.data.list.length > 0) {
						cb(res.data.list);
					} else {
						cb([]);
					}
				})
				.catch(e => {
					cb([]);
				});
		},
		handleSelect(v, e) {
			let obj = this.selectEngine.find(item => item.engine == this.selectedEngine);
			if (obj) {
				if (e && e.altKey) {
					this.translate(v);
				} else {
					window.open(obj.url.replace('${search}', v));
				}
			}
		},
		saveEngine(v) {
			window.localStorage.setItem('searchEngine', v);
		},
		getDefaultSearchEngine() {
			let e = window.localStorage.getItem('searchEngine');
			if (e) {
				this.selectedEngine = e;
			}
		},
		translate(text) {
			window.open('https://fanyi.baidu.com/#en/zh/' + encodeURI(text));
		},
		timeFormat(t) {
			return dateFormat(t, 'HH:mm');
		},
		dateFormat(t) {
			return dateFormat(t, 'M月d日 周E');
		},
		getWeatherStr(obj) {
			if (obj.nightWeather === obj.dayWeather) {
				return obj.nightWeather;
			} else {
				return obj.nightWeather + '转' + obj.dayWeather;
			}
		},
		getRecommendBg() {
			//获取背景
			getBg().then(res => {
				if (res.code == 200) {
					this.bgSrc = this.getSrc(res.data);
					console.log('使用背景', this.bgSrc);
				} else {
					console.error("获取背景失败", res)
				}
			});
		},
		changeBg(src) {
			this.bgSrc = this.getSrc(src);
			window.localStorage.setItem(USE_BG, this.bgSrc);
			this.$message.closeAll();
			this.$message.success('已切换');
		}
	},
	mounted() {
		this.awaitInitedSetting(() => {
			//电脑端会获取焦点
			if (this.setting.autoFocus) {
				if (!isPE()) {
					setTimeout(() => {
						this.$refs.search.focus();
					}, 500);
				} else {
					//手机端可以看到热搜列表
					this.activeInput = true;
					this.activeBg = true;
				}
			}

			if (this.setting.showWeather) {
				//获取天气
				getWeather().then(res => {
					if (res.code == 200) {
						this.weather = res.data.now;
						this.weatherForecast = res.data.forecast;
					} else {
						console.error("获取天气失败", res)
					}
				});
			}
		});
	},
	beforeCreate() {
		document.body.style['background-color'] = '#000';
	},
	beforeUnmount() {
		document.body.style['background-color'] = '#fff';
	},
	components: {
		insert2body,
		uploadImage,
		// loginBox
	},
	computed: {
		user() {
			return this.$store.state.user.user;
		},
		STATIC_URL() {
			return config.STATIC_URL
		}
	}
};
</script>

<style lang="scss">
.engine-popper {
	padding: 5px !important;
}

.engineList {
	.engine {
		padding: 2px 0;
		display: flex;
		align-items: center;
		cursor: pointer;
		border-radius: 5px;
		margin-bottom: 2px;

		&:hover {
			background-color: rgba(0, 0, 0, .11);
		}

		.logo {
			margin-right: 10px;

			svg {
				width: 20px;
				height: 20px;
			}
		}

		.name {
			font-size: 12px;
		}

		.kjj {
			flex: 1;
			text-align: right;
			padding-right: 10px;
			font-size: 10px;
		}
	}
}

#index-home {
	height: 100%;
	width: 100%;

	* {
		user-select: none;
	}
	#beian{
		position: absolute;
		bottom: 0px;
		text-align: center;
		width: 100%;
		a{
			color: #fff;
		}
	}

	.view-front {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;

		.row {
			text-align: left;
		}

		.top {
			margin-top: 120px;

			.date-time {
				display: flex;
				flex-direction: column;

				* {
					user-select: none;
				}

				.time {
					color: #fff;
					font-size: 40px;
					font-weight: inherit;
					text-shadow: 0 0 20px rgb(0 0 0 / 35%);
					cursor: pointer;
					transition: 0.25s;
					line-height: 20px;
					animation-name: delayedFadeIn;
					animation-duration: 2s;
					animation-iteration-count: 1;
					animation-delay: 0s;
					font-family: monospace;
					text-align: center;

					&:hover {
						transform: scale(1.1);
					}
				}

				.date {
					color: #fff;
					font-size: 12px;
					font-weight: inherit;
					text-shadow: 0 0 20px rgb(0 0 0 / 35%);
					transition: 0.25s;
					line-height: 20px;
					animation-name: delayedFadeIn;
					animation-duration: 2s;
					animation-iteration-count: 1;
					animation-delay: 0s;
					font-family: monospace;
					text-align: center;
					padding-top: 8px;
				}
			}

			.weather {
				color: #fff;
				font-size: 12px;
				font-weight: inherit;
				text-shadow: 0 0 20px rgb(0 0 0 / 35%);
				transition: 0.25s;
				line-height: 20px;
				animation-name: delayedFadeIn;
				animation-duration: 2s;
				animation-iteration-count: 1;
				animation-delay: 0s;
				font-family: monospace;
				text-align: center;
				margin-top: 5px;
			}

			.foreast-wapper {
				position: relative;
				overflow: hidden;
				height: 20px;

				.foreast {
					margin-top: 0;
					position: relative;
					top: 0;

					.item {
						height: 20px;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}

		.search-box {
			width: 230px;
			max-width: 80%;
			padding: 0 15px;
			transition: all 0.4s;
			position: relative;
			display: flex;

			&.active {
				width: 530px;

				.search {
					color: #000;
					background-color: rgba(255, 255, 255, 0.95);
				}

				.engine {
					display: block;
				}
			}

			&:hover {
				width: 530px;
			}

			.search {
				background-color: rgba(233, 233, 233, 0.23);
				border: none;
				margin-top: 15px;
				padding: 15px 40px;
				outline: none;
				border-radius: 888px;
				box-shadow: rgb(0 0 0 / 20%) 0 0 10px;
				text-align: center;
				z-index: 6;
				color: rgba(233, 233, 233, 0.88);
				user-select: text;
				transition: all 0.4s;
				flex: 1;
			}

			.engine {
				position: absolute;
				left: 20px;
				top: 19px;
				width: 30px;
				height: 30px;
				padding: 5px;
				border-radius: 50%;
				display: none;
				transition: all 0.2s;
				z-index: 333;

				&:hover {
					background-color: #ccc;
					cursor: pointer;
				}
			}
		}

		.keyword {
			backdrop-filter: blur(30px);
			width: 530px;
			max-width: 80%;
			border-radius: 15px;
			overflow: hidden;
			transition: height 0.2s;

			.row {
				padding: 0px 20px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				height: 30px;
				line-height: 30px;
				transition: all 0.2s;
				color: rgba(255, 255, 255, 0.8);
				cursor: pointer;
				font-size: 14px;

				&:hover {
					background-color: rgba(255, 255, 255, 0.2);
					text-indent: 14px;
				}
			}

			.translate {
				display: flex;
				align-items: center;

				span {
					white-space: nowrap;
					overflow: hidden;
				}

				svg {
					width: 20px;
				}
			}
		}
	}

	.view-back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;

		.site-box {
			/**
			 * .site宽度*count+(count-1)*gap
			 */
			max-width: 390px;
			display: flex;
			// justify-content: center;
			flex-wrap: wrap;
			gap: 60px;

			.site {
				width: 90px;
				cursor: pointer;
				display: flex;
				flex-direction: column;

				&:hover {
					.logo {
						background-color: #f0f0f0;
					}

					.label {
						color: #eee;
					}
				}

				.logo {
					background-color: #fafafa;
					border-radius: 15px;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 10px 0;

					svg {
						width: 40px;
						height: 40px;
						padding: 10px 0 10px 0;
					}

					.label {
						text-align: center;
						color: #fff;
						font-size: 14px;
						color: #000;
						white-space: nowrap;
					}
				}
			}
		}

		.tip {
			position: absolute;
			bottom: 35px;
			background-color: rgba(255, 255, 255, .6);
			padding: 10px;
			border-radius: 5px;
		}
	}

	.bg {
		z-index: -8;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transition: opacity 1s, transform 0.3s;
		opacity: 1;
		background-color: #000;
		object-fit: cover;

		&.active-bg {
			transform: scale(1.2);
		}

		&.op0 {
			opacity: 0;
		}

		&.bgBlur {
			filter: blur(1px);
		}
	}
}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 800px) {}

@media screen and (max-width: 500px) {
	#index-home {
		.top {
			margin-top: 50px;
		}
	}
}
</style>
<style>
.top2bottom-enter-from,
.top2bottom-leave-to {
	transform: translateY(-30px) scale(0.8);
	opacity: 0;
}

@keyframes downAnimation {
	0% {
		transform: translate(0px, 0px) scale(0.7);
		opacity: 0.8;
	}

	65% {
		transform: translate(0px, 20px) scale(1);
		opacity: 1;
	}

	100% {
		transform: translate(0px, 0px) scale(0.7);
		opacity: 0.8;
	}
}</style>
